<template>
  <el-form
    :model="addForm"
    label-width="130px"
    style="display: inline-block"
    :rules="addFormRules"
    ref="addForm"
  >
    <el-row>
      <el-col :span="12">
        <el-form-item>
          <el-upload
            action=""
            :show-file-list="false"
            list-type="picture-card"
            :http-request="httpRequest"
          >
            <i
              v-if="!photosUrl"
              class="el-icon-plus"
            ></i>
            <img
              v-if="photosUrl"
              :src="photosUrl"
              alt=""
              class="avatar"
            />

          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">

        <el-form-item
          label="累计金额上限:"
          prop="priceUp"
        >
          <el-input
            placeholder="请输入累计金额上限"
            oninput="value=value.replace(/[^0-9]/g,'')"
            clearable
            v-model="addForm.priceUp"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="累计金额下限:"
          prop="priceDown"
        >
          <el-input
            placeholder="请输入累计金额下限"
            oninput="value=value.replace(/[^0-9]/g,'')"
            clearable
            v-model="addForm.priceDown"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="等级顺序:"
          prop="gradeSeq"
        >
          <el-input
            placeholder="请输入等级顺序"
            oninput="value=value.replace(/[^0-9]/g,'')"
            clearable
            v-model="addForm.gradeSeq"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="获取积分倍率:"
          prop="integralUprate"
        >
          <el-input
            placeholder="请输入积分倍率"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            clearable
            v-model="addForm.integralUprate"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item
          label="会员等级:"
          prop="memberLevelDictId"
        >
          <el-select
            style="width: 220px"
            clearable
            v-model="addForm.memberLevelDictId"
            class="drag-select"
          >
            <el-option
              v-for="item in dict['客户会员等级']"
              :key="item.index"
              :value="item.value"
              :label="item.text"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="配件折扣:"
          prop="partsDiscount"
        >
          <el-input
            placeholder="请输入折扣率"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            clearable
            v-model="addForm.partsDiscount"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item
          label="门店:"
          prop="storeId"
        >
          <job-shop
            v-model="addForm.storeId"
            placeholder="所属门店"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="工时折扣:"
          prop="hoursDiscount"
        >
          <el-input
            placeholder="请输入折扣率"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            clearable
            v-model="addForm.hoursDiscount"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col
        :span="24"
        align="center"
      >
        <el-button
          type="primary"
          style="width: 100px"
          @click="onSubmit"
        >保存</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { addLevel } from '@/api/after-sale/client/level'
import ElRow from 'element-ui/packages/row/src/row'
import { JobShop } from '@/components/index'
import {
  getDict,
  fileUpload,
  getImageUrl,
  parseTimeToYMDHMS,
} from '@/utils/index'
export default {
  components: { ElRow, JobShop },
  name: 'DialogDataForm',
  props: {
    value: {
      type: Object,
      default: () => ({}),
    },
    menus: {
      type: Object,
    },
  },
  data () {
    return {
      dict: {},
      photosUrl: '', //图片地址
      addForm: {
        gradeSeq: '', //	integer($int32)等级顺序
        hoursDiscount: '', //	number($double)工时折扣
        id: '', //	integer($int32)
        integralUprate: '', //	number($double)积分倍率
        memberLevelDictId: '', //	integer($int32)会员卡等级
        name: '', //	string会员卡名称
        partsDiscount: '', //	number($double)配件折扣
        photos: '', //	string图片
        priceDown: '', //number金额下限
        priceUp: '', //	number金额上限
        remark: '', //	string备注
        storeId: '', //	integer($int32)所属门店
      },
      addFormRules: {
        priceUp: [{
          required: true, trigger: 'change', validator: (rule, value, callback) => {
            if (value) {
              if (Number.isInteger(+value) && +value > +this.addForm.priceDown) {
                callback();
                this.$refs['addForm'].clearValidate("priceDown")
              } else {
                callback('必须是整数，且上限大于下限')
              }
            } else {
              callback('请输入金额上限')
            }
          }
        }],
        priceDown: [{
          required: true, trigger: 'change', validator: (rule, value, callback) => {
            if (value) {
              if (Number.isInteger(+value) && +value < +this.addForm.priceUp) {
                callback();
                  this.$refs['addForm'].clearValidate("priceUp")
              } else {
                callback('必须是整数，且下限小于上限')
              }
            } else {
              callback('请输入金额下限')
            }
          }
        }],
        gradeSeq: [{
          required: true, trigger: 'blur', validator: (rule, value, callback) => {
            if (value) {
              if (value >= 0 && value <= 99) {
                callback()
              } else {
                callback('等级顺序为两位正整数')
              }
            } else {
              callback('请输入等级顺序')
            }
          }
        }],
        integralUprate: [{ required: true, trigger: 'blur' }],
        memberGrade: [{ required: true, trigger: 'blur' }],
        partsDiscount: [{
          required: true, trigger: 'blur', validator: (rule, value, callback) => {
            if (value) {
              if (value >= 1 && value <= 10) {
                callback()
              } else {
                callback('折扣在1到10折之间')
              }
            } else {
              callback('请输入折扣');
            }
          }
        }],
        storeId: [{ required: true, trigger: 'blur' }],
        hoursDiscount: [{
          required: true, trigger: 'blur', validator: (rule, value, callback) => {
            if (value) {
              if (value >= 1 && value <= 10) {
                callback()
              } else {
                callback('折扣在1到10折之间')
              }
            } else {
              callback('请输入折扣');
            }
          }
        }],
      },
    }
  },
  async created () {
    this.dict = getDict(['客户会员等级'])
    this.setFromValue()
  },
  methods: {
    //设置详情值到表单
    setFromValue () {
      if (Object.keys(this.value).length > 0) {
        this.addForm = { ...this.value }
        this.photosUrl = getImageUrl(this.value.photos)
      }
    },
    //文件上传
    httpRequest (value) {
      fileUpload(value.file).then((res) => {
        let { success, data } = res
        if (success) {
          this.addForm.photos = data.id
          this.photosUrl = getImageUrl(data.id)
        }
      })
    },
    onSubmit () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          const options = this.addForm
          if (!this.value.id) {
            this.$emit('operate', options, 'send')
          } else {
            options.id = this.value.id
            this.$emit('operate', options, 'update')
          }
        } else {
          return false
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.avatar {
  width: 146px;
  height: 146px;
  display: block;
}
/deep/ .el-upload--picture-card {
  width: 146px;
  height: 146px;
}
</style>

